<template>
  <div class="zhuanji" v-if="nullzhuan.data">
      <div  v-if="nullzhuan.data.data.list.length===0" class="text">作者还没有创建专辑</div>

      <div class="centent" v-for="(item,index) in zhuanji" :key="index">
        <img :src="item.cover_url" alt="">
        <p>{{item.title}}</p>
        <span>作品{{item.count.count_article}}&nbsp;</span>&nbsp;
        <span>浏览{{liulan[index]}}&nbsp;</span>&nbsp;
        <span>赞{{like[index]}}&nbsp;</span>
      </div>
  </div>
</template>

<script>
export default {
  created(){
    this.getzhuanji(this.$route.query.id)
  },
  data(){
    return{
       nullzhuan:[],
       zhuanji:[],
       //浏览量
       liulan:[],
       //喜欢
       like:[]
    }
  },
  methods:{
    //视频点赞数
       formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + "";
      } else if (num >= 1 && num <= 10000) {
        return num + "";
      } else {
        return (num / 10000).toFixed(1) + "w";
      }
    },
    getzhuanji(id){
      this.axios({
        method:'get',
        url:'https://apis.netstart.cn/xpc/user/'+id+'/collections',

      }).then(result=>{
        this.nullzhuan=result
        this.zhuanji=result.data.data.list
        
        this.zhuanji.forEach(v => {
         this.liulan.push(this.formatNumber(v.count.count_viewed))
         this.like.push(this.formatNumber(v.count.count_liked))
        });
        
        
      }).catch(err=>{
       
      })
    }
  }
}
</script>

<style lang="less" scoped>
.zhuanji{
  width: 95%;
  margin-left: 10px;
  
}
.text{
   width: 50%;
   height: 50px;
   text-align: center;
   line-height: 50px;
   font-size: 15px;
   color: rgb(194, 194, 194);
   margin-left: 25%;
   margin-top: 40%;
}
.centent{
  width: 100%;
  height: 270px;
  margin-top: 30px;
  img{
    width: 100%;
    height: 200px;
    border-radius: 10px;
  }
  p{
    font-size: 17px;
    margin-top: 10px;
    font-weight: bold;
  }
  span{
    
    color: rgb(138, 137, 137);
  }
}
</style>